<template>
    <div class="right-panel">
      <button @click="generateArticle" class="generate-article-btn">生成文章</button>
      <div class="display-box">
        <div v-if="!streamingArticle" class="placeholder">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="placeholder-icon"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
          <h3>文章生成区</h3>
          <p>点击上方的“生成文章”按钮<br/>即可在此处查看流式生成的完整内容。</p>
        </div>
        <div v-else v-html="streamingArticle"></div>
      </div>
    </div>  
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const streamingArticle = ref('');
  let intervalId = null;
  
  const generateArticle = () => {
    streamingArticle.value = ''; // 清空旧内容
    const fullText = `这是一个通过流式传输模拟生成的文章。
  一点一点地出现...
  就像打字机一样。
  段落1：文章的开头部分。
  段落2：文章的中间部分，可以有很多细节。
  段落3：文章的结尾，总结全文。
  传输完毕！`;
    
    let index = 0;
    if (intervalId) {
      clearInterval(intervalId);
    }
  
    intervalId = setInterval(() => {
      if (index < fullText.length) {
        // 使用 <br> 替换换行符以在 v-html 中正确显示
        const char = fullText[index] === '\n' ? '<br>' : fullText[index];
        streamingArticle.value += char;
        index++;
      } else {
        clearInterval(intervalId);
        intervalId = null;
      }
    }, 50); // 每50毫秒添加一个字符
  };
  </script>
  
  <style scoped>
  .right-panel {
    width: 60%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .generate-article-btn {
    width: 100%;
    padding: 1em;
    font-size: 1.1em;
    font-weight: 600;
  }
  
  .display-box {
    flex-grow: 1;
    border: 1px solid var(--border-color, #EAEAEA);
    border-radius: 8px;
    padding: 20px;
    background-color: var(--panel-bg-color, #fff);
    overflow-y: auto;
    line-height: 1.7;
    color: var(--text-color, #5D4037);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    display: flex; /* Flexbox to center placeholder */
    justify-content: center;
    align-items: center;
  }
  
  /* New placeholder styles */
  .placeholder {
    text-align: center;
    color: #aaa;
  }
  
  .placeholder-icon {
    margin-bottom: 16px;
  }
  
  .placeholder h3 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
    color: #bbb;
  }
  
  .placeholder p {
    margin: 0;
    line-height: 1.6;
  }
  
  button {
    align-self: flex-start;
  }
  </style> 